import React, { Component } from 'react';
import '../index.css'
import Dygzj from './第一个组件'
import Degzj from './第二个组件'
import Dsgzj from './context通信'
import Dsigzj from './第四个组件'
import Dwgzj from './第五个组件'
import { Provider } from './context'
class zjsy extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      obj:{
        a:'测试',
        b:false
      },
      two:'放假没?',
      three:'到周日没?'
    }
  }
  render() { 
    return ( 
      <div>
        <ul className="myUl clearfix">
          <li>
            <div>父子传值</div>
            <Dygzj mytitle='home' myshow={false} {...this.state.obj}></Dygzj>
          </li>
          <li>
            <div>子传父</div>
            <Degzj two={this.state.two} twoEvent={this.twoModify}></Degzj>
          </li>
          <li>
            <div>context 通信  <button onClick={this.fatherTurn}>改变一下</button></div>
            <Provider value={{
              three:this.state.three,
              sonTurn:this.sonTurn
            }}>
              <Dsgzj></Dsgzj>
            </Provider>
          </li>
          <li>
            <div>消息发布与订阅pubsub</div>
            <Dsigzj></Dsigzj>
            <Dwgzj></Dwgzj>
          </li>   
        </ul>
      </div>
    );
  }
  twoModify=(res)=>{
    this.setState({
      two:res
    })
  }
  fatherTurn=()=>{
    this.setState({
      three:'还没到吧'
    })
  }
  sonTurn=(res)=>{
    this.setState({
      three:res
    })
  }
}
 
export default zjsy;